<template>
  <HeaderNav />
  <article>
    <!-- 网站主体 -->
    <div id="main">
      <section class="ct">
		  <h1 class="attent-title">邮箱验证码-找回密码</h1>
		  
		  <div class="bg-hr"></div>
		
        <div class="upload">
          <form action="" method="post">
            <p>
              <label>输入邮件：</label>
              <input class="upt" type="text" v-model.trim="email" placeholder="请输入您账号注册时绑定的邮箱" />
              <em></em>
            </p>
            <p>
              <label>邮件验证码：</label>
              <input class="upt" type="text" v-model.trim="code" placeholder="请输入邮件验证码"
                     style="width: 720px;vertical-align: middle"/>
              <button class="btn-code" @click.prevent="getEmailCode" v-text="btnText"></button>
              <em></em>
            </p>
            <p>
              <label>新密码：</label>
              <input class="upt" type="password" v-model.trim="newPassword" placeholder="请输入新密码"/>
              <em></em>
              <span class="source-tag-msg">密码长度为6~20</span>
            </p>
            <p>
              <label>确认密码：</label>
              <input class="upt" type="password" v-model.trim="confirmPassword" placeholder="请再次输入新密码"/>
              <em></em>
              <span class="source-tag-msg">两次输入的密码必须保持一致</span>
            </p>
            <a class="btn" @click="findPassHandler">确认找回</a>
          </form>
        </div>
      </section>
    </div>
  </article>
  <Footer />
</template>

<script>
import HeaderNav from "../components/HeaderNav.vue";
import Footer from "../components/Footer.vue";
export default {
  components: {
    HeaderNav,
    Footer,
  },
  data() {
    return {
      btnText: "获取验证码",
      email: "" ,
      code: "" ,
      newPassword: "",
      confirmPassword: "",
    }
  },
  methods: {
    findPassHandler(){
       // 处理找回密码的逻辑
      if (this.email == null || this.email === "") {
        this.$toastr.warning("请先输入您的邮箱账号");
        return;
      }
      if (this.code == null || this.code === "") {
        this.$toastr.warning("邮箱验证码不允许为空");
        return;
      }
      if (this.newPassword == null || this.newPassword === "") {
        this.$toastr.warning("新密码不允许为空");
        return;
      }

      if (this.newPassword.length < 6 || this.newPassword.length > 20) {
        this.$toastr.warning("新密码长度应该在 6 ~ 20 位");
        return;
      }

      if (this.newPassword != this.confirmPassword) {
        this.$toastr.warning("两次输入的密码不一致");
        return;
      }
      // 发送所有的参数，进行密码修改
      this.$api.findPassword({email: this.email, code: this.code, password: this.newPassword}).then(ret=> {
         if (ret.status) {
           this.$toastr.success("密码修改成功、请使用修改后的密码登录本系统");
           this.$router.push({name: "login"})
         }
      })

    },
    getEmailCode(event) {
      if (this.email == null || this.email === "") {
        this.$toastr.warning("请先输入您的邮箱账号");
        return;
      }

      if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/g.test(this.email)) {
        this.$toastr.warning("邮箱账号格式不正确");
        return;
      }
      //点击后开始倒计时 一分钟内 按钮不允许点击
      event.target.disabled = true;
      // 倒计时效果
      let numText = 60;
      let playing = setInterval(() => {
        event.target.innerText = numText + "S";
        if (numText <= 0) {
          clearInterval(playing);
          event.target.disabled = false;
          event.target.innerText = this.btnText;
        }
        numText--;
      }, 1000);
      // 发送异步请求，获取 该邮箱的验证码
      this.$api.getEmailCode(this.email, "找回密码").then(ret => {
        if (ret.status) {
          this.$toastr.info("验证码已发送到您的邮箱、请注意查收");
        }
      }).catch(error => {
        clearInterval(playing);
        event.target.disabled = false;
        event.target.innerText = this.btnText;
      })
    }
  }
}
</script>

<style>
.btn-code {
  display: inline-block;
  height: 40px;
  width: 110px;
  text-align: center;
  border: 1px solid #1296db;
  vertical-align: middle;
  box-sizing: border-box;
  border-radius: 15px;
  line-height: 40px;
  font-size: 12px;
  cursor: pointer;
  margin: 0 5px;
}
</style>
